<script lang="ts" setup >
import { Map, View, Feature } from 'ol'
import { computed, onMounted, ref, nextTick, createVNode, reactive } from 'vue'
import { useMessage } from 'naive-ui'
import { useTianDiTu, useFullScreen, useDraw } from '@/hooks/map'
import type { DrawEvent } from 'ol/interaction/Draw'

const { createTitleLayer } = useTianDiTu()
const key = 'b945c29c5388432e34b51b5d824d8157'
let map: Map | null = null
onMounted(() => {
    map = new Map({
        // 挂在容器
        target: "plottingPoint_map",
        // 天地图底图
        layers: [
            createTitleLayer('vec_w', key),
            createTitleLayer('cia_w', key)
        ],
        controls: [], // 不包含任何控制组件
        //视图
        view: new View({
            center: [113.75395, 34.76572],
            zoom: 8,
            projection: "EPSG:4326"
        })
    })
    window.$map = map
})



const clear = () => {
    map?.getAllLayers().forEach((layer) => {
        if ('tian_di_tu_title_layer' !== layer.get("name")) map?.removeLayer(layer)
    })
}
const active = ref<boolean>(false)
const formData = reactive({
    mapx: '',
    mapy: ''
})
const submit = () => {
    console.log('34234', {...formData})
}
const { start, end } = useDraw({
    name: "point",
    drawType: 'Point',
    map: map,
    drawend(evt: DrawEvent) {
        const point = evt.feature.getGeometry?.().getCoordinates?.()
        if (Array.isArray(point)) {
            formData.mapx = point[0]
            formData.mapy = point[1]
            active.value = true
        }
        console.log('evt.feature.getGeometry()', point);
    }
})
const enablePoint = ref<boolean>(false)
const text1 = computed(() => enablePoint.value ? '结束绘制点' : '开始绘制点')
const point = () => {
    enablePoint.value ? end() : start()
    enablePoint.value = !enablePoint.value
}



</script>
<template>
    <div id="containder">
        <div id="plottingPoint_map" style="height: 100vh; width: 100%;" class="map-containder"></div>
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
        </div>
        <div class="btn-groups">
            <n-space btn-groups>
                <n-button type="primary" @click="point">
                    {{ text1 }}
                </n-button>
                <n-button type="primary" @click="clear">
                    清空
                </n-button>
            </n-space>
        </div>

        <n-drawer v-model:show="active" :width="502" placement="left" :mask-closable="false">
            <n-drawer-content title="斯通纳" closable>
                <n-form ref="formRef" inline :label-width="80" :model="formData" size="large">
                    <n-form-item label="姓名" path="user.name">
                        <n-input v-model:value="formData.name" placeholder="输入姓名" />
                    </n-form-item>
                    <n-form-item>
                        <n-button attr-type="button" @click="submit">
                            提交
                        </n-button>
                    </n-form-item>
                </n-form>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>
<style scoped>
.map-containder {
    position: relative;
    height: calc(100vh - 110px);
    width: 100%;
}

.btn-groups {
    position: absolute;
    right: 100px;
    bottom: 200px;
    height: 20vh;
    padding: 5px;
    background-color: rgba(42, 207, 207, 0.336)
}
</style>